<template>
    <div class="popups">
      <p>支付金额（元）<img src="../../assets/img/close.png" alt="" class="close" @click="close"></p>
      <p class="actual">{{actual}}</p>
      <p class="chooseWay">请选择支付方式</p>
      <van-radio-group v-model="radio" class="choose" v-for="(v,i) in data" :key="i" v-if="i==2||(i==1&&isWeixinBlean)||(i==0&&!isWeixinBlean)">
        <van-radio :name="v.pay_id">
          <img :src="v.pay_logo" alt="">
          {{v.pay_name}}
        </van-radio>
      </van-radio-group>
      <div class="submit" @click="onSubmit">提交</div>
      <div>
        <form id='alipaysubmit' name='alipaysubmit' :action='aliPay.url' method='get'>
          <input type='hidden' name='_input_charset' v-model='aliPay._input_charset'/>
          <input type='hidden' name='body' v-model='aliPay.body'/>
          <input type='hidden' name='notify_url' v-model='aliPay.notify_url'/>
          <input type='hidden' name='out_trade_no' v-model='aliPay.out_trade_no'/>
          <input type='hidden' name='partner' v-model='aliPay.partner'/>
          <input type='hidden' name='payment_type' v-model='aliPay.payment_type'/>
          <input type='hidden' name='return_url' v-model='aliPay.return_url'/>
          <input type='hidden' name='seller_id' v-model='aliPay.seller_id'/>
          <input type='hidden' name='service' v-model='aliPay.service'/>
          <input type='hidden' name='subject' v-model='aliPay.subject'/>
          <input type='hidden' name='total_fee' v-model='aliPay.total_fee'/>
          <input type='hidden' name='sign' v-model='aliPay.sign'/>
          <input type='hidden' name='sign_type' value="MD5"/>
          <input type='submit'  value='确认' style='display:none;' class="aliSubmit">
      </form>
      </div>
    </div>
</template>

<script>
import request from "@/request/index.js"
    export default {
      name: "alertPay",
      props:['data','actual','order_sn'],
        data(){
          return{
            radio:1,
            isWeixinBlean:'',
            aliPay:{
              body: "",
              notify_url: "",
              out_trade_no: "",
              partner: "",
              payment_type: "",
              return_url: "",
              seller_id: "",
              service: "",
              show_url: "",
              subject: "",
              total_fee: "",
              url: "",
              sign:'',
              _input_charset: "",
            },
            show:false,
          }
        },
        // props:[],
        watch:{
          aliPay(newVal,oldVal){
            setTimeout(function(){
              document.getElementById('alipaysubmit').submit();
            },200)
            
          } 
        },
      methods:{
        close(){
          this.$emit('close',)
        },
        onSubmit(){
          request.getPay(this)
        },
        onBridgeReady(){

        },
        isWeiXin() {
          var ua = window.navigator.userAgent.toLowerCase(); 
          if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
              this.radio=0;
              return true; 
              
          } else { 
              return false; 
          } 
        }
      },
      mounted(){
        this.isWeixinBlean=this.isWeiXin()
      }
    }
</script>

<style scoped lang="scss">
.popups{
  width: 300px;
  height: 340px;
  border-radius: 1vw;
  top: 0;right: 0;bottom: 0;
  margin: auto;
  padding: 2.5vw 2vw;
  .submit{
    width: 150px;
    height: 10.33vw;
    background: #ff4c50;
    font-size: 18px;
    margin: 0px auto;
    border-radius: 13vw;
    line-height: 10.33vw;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 30px;
    left: 75px;
  }
  .choose{
    width: 100%;
    height: 10vw;
      img{
        width: 4vw;
        position: relative;
        top: .5vw;
      }
  }
  .chooseWay{
    color: #666;
    font-size: 13px;
  }
  .actual{
    width: 100%;
    height: 24vw;
    color: #333;
    font-size: 30px;
    text-align: center;
    line-height: 24vw;

  }
    .close{
      width: 4vw;
      float: right;
    }
}

  
</style>
<style>
  .van-radio .van-icon-checked{
    color: #ff4c50!important;
  }
  .van-radio{
    line-height: 9vw;
  }
  .van-radio__input{
    float: right;
    font-size: 15px;
  }
</style>
